import React, {Component,} from 'react'
import {withRouter} from 'react-router-dom'
// import {connect} from 'react-redux'

import '../LiveRoomHeader.css'
import './OnLiveHeader.css'
import OnLiveHeaderFullScreen from "./OnLiveHeaderFullScreen/OnLiveHeaderFullScreen"
import OnLiveHeaderNormal from "./OnLiveHeaderNormal/OnLiveHeaderNormal"
import VideoPlayer from "./VideoPlayer/VideoPlayer"

class OnLiveHeader extends Component {

    constructor(props) {
        super(props)
        this.state = {
            fullScreen: false,
            orientation: false,
        }
    }

    componentDidMount() {
        this.checkOrientationChange()
    }

    checkOrientationChange = () => {
        window.addEventListener("orientationchange", (event) => {
            const w = window.innerWidth
            const h = window.innerHeight
            if (w > h) {

                this.setState({
                    orientation: false,
                    fullScreen: false,
                })
            } else {

                this.setState({
                    orientation: true,
                })
            }
        })
    }

    fullSize = () => {

        this.setState({
            fullScreen: !this.state.fullScreen,
        })
    }

    onShowShare = () => {
        this.props.onShowShare()
    }

    offLive = () => {
        const Id = this.props.liveDetail.Id
        const cid = this.props.liveDetail.Cid
        // this.props.doStarOffline(payload)
        this.props.doDeleteLive({Id, cid,})
    }

    render() {
        const fullScreen = this.state.fullScreen
        const orientation = this.state.orientation
        const history = this.props.history
        const liveDetail = this.props.liveDetail

        let template
        if (fullScreen && !orientation) {
            template = (
                <OnLiveHeaderFullScreen
                    showSharePopup={this.props.showSharePopup}
                    hideSharePopup={this.props.hideSharePopup}
                    onShowShare={this.onShowShare}
                    VideoPlayer={<VideoPlayer/>}
                    history={history}
                    liveDetail={liveDetail}
                    fullSize={this.fullSize}
                />
            )
        } else {
            template = (
                <OnLiveHeaderNormal
                    showSharePopup={this.props.showSharePopup}
                    hideSharePopup={this.props.hideSharePopup}
                    onShowShare={this.onShowShare}
                    VideoPlayer={<VideoPlayer/>}
                    liveDetail={liveDetail}
                    history={history}
                    fullSize={this.fullSize}
                />
            )
        }

        return template
    }

}

// const mapState = state => ({
//     dialogues: state.chat.dialogues,
// })
// const mapDispatch = dispatch => ({
//     doStarOffline: (payload) => dispatch.star.doStarOffline(payload),
//     doDeleteLive: (payload) => dispatch.star.doDeleteLive(payload),
// })
// export default connect(mapState, mapDispatch)(withRouter(OnLiveHeader))
export default withRouter(OnLiveHeader)
